<div class="content">
    <div id="example_title">
        <h1>Validation</h1>
        A number of validation tools are provided by w2utils. Type anything in the field below to see validation at work. Try integers, floats,
        money, dates, emails.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<input id="str" type="text" class="w2ui-input" style="width: 200px">
<br><br>
<div style="float: left; width: 150px;">isBin</div>          <div id="isBin" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isInt</div>          <div id="isInt" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isFloat</div>        <div id="isFloat" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isHex</div>          <div id="isHex" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isMoney</div>        <div id="isMoney" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isAlphaNumeric</div> <div id="isAlphaNumeric" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isEmail</div>        <div id="isEmail" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isTime</div>         <div id="isTime" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isDate</div>         <div id="isDate" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isDateTime</div>     <div id="isDateTime" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">isIpAddress (1.5+)</div>    <div id="isIpAddress" style="margin-left: 150px;">...</div>
<div style="height: 20px"></div>
<div style="float: left; width: 150px;">age</div>            <div id="goAge" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">date</div>           <div id="goDate" style="margin-left: 150px;">...</div>
<div style="float: left; width: 150px;">interval</div>       <div id="goInterval" style="margin-left: 150px;">...</div>

<!--CODE-->
<script type="module">
import { w2utils, query } from '__W2UI_PATH__'

query('#str').on('keyup', update)
function update() {
	query('#isBin').html(w2utils.isBin(query('#str')[0].value) ? 'Yes' : '-');
    query('#isInt').html(w2utils.isInt(query('#str')[0].value) ? 'Yes' : '-');
    query('#isFloat').html(w2utils.isFloat(query('#str')[0].value) ? 'Yes' : '-');
    query('#isHex').html(w2utils.isHex(query('#str')[0].value) ? 'Yes' : '-');
    query('#isMoney').html(w2utils.isMoney(query('#str')[0].value) ? 'Yes' : '-');
    query('#isAlphaNumeric').html(w2utils.isAlphaNumeric(query('#str')[0].value) ? 'Yes' : '-');
    query('#isEmail').html(w2utils.isEmail(query('#str')[0].value) ? 'Yes' : '-');
    query('#isDate').html(w2utils.isDate(query('#str')[0].value) ? 'Yes' : '-');
    query('#isTime').html(w2utils.isTime(query('#str')[0].value) ? 'Yes' : '-');
    query('#isDateTime').html(w2utils.isDateTime(query('#str')[0].value) ? 'Yes' : '-');
    query('#isIpAddress').html(w2utils.isIpAddress(query('#str')[0].value) ? 'Yes' : '-');

    if (w2utils.isInt(query('#str').val())) {
        query('#goInterval').html(w2utils.interval(query('#str')[0].value));
    } else {
        query('#goInterval').html('-');
    }
    if (w2utils.isDate(query('#str')[0].value)) {
        query('#goAge').html(w2utils.age(query('#str')[0].value));
        query('#goDate').html(w2utils.date(query('#str')[0].value));
    } else {
        query('#goAge').html('-');
        query('#goDate').html('-');
    }
}
</script>
